<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./bootstrap-3.4.1/dist/css/bootstrap.css" />
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="./bootstrap-3.4.1/dist/js/bootstrap.js"></script>
    <script src="./city.js"></script>
  </head>
  <style>
    .se {
      width: 150px;
      float: left;
    }
  </style>
  <body>
    <div>
      <select class="form-control se" id="province">
        <option>请选择省</option>
      </select>
      <select class="form-control se" id="city">
        <option>请选择市</option>
      </select>
      <select class="form-control se" id="area">
        <option>请选择区县</option>
      </select>
    </div>
  </body>
  <script>
    $(function () {
      var strHtml = '<option>请选择省</option>'
      for (let i in citys) {
        strHtml += `
          <option value="${i}">${citys[i].name}</option>
        `
      }
      $('#province').html(strHtml)
      $('#province').change(function () {
        console.log($(this).val())
        let index = $(this).val()
        let cityArr = citys[index].city
        let optionHtml = '<option>请选择市</option>'
        for (let i in cityArr) {
          optionHtml += `
                <option value="${index}-${i}">${cityArr[i].name}</option>
            `
        }
        $('#city').html(optionHtml)
      })
      $('#city').change(function () {
        let index = $(this).val()
        let indexArr = index.split('-')
        let area = citys[indexArr[0]].city[indexArr[1]].area
        let optionHtml = '<option>请选择区县</option>'
        for (let i in area) {
          optionHtml += `
                <option value="${index}-${i}">${area[i]}</option>
            `
        }
        $('#area').html(optionHtml)
      })
    })
    //获取指定范围随机数
    function getRandomNum(){
      return Math.floor(Math.random()*(100-1+1)+1);
      
    }
    
  </script>
</html>
